<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="<%=basePath%>static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="<%=basePath%>static/css/font.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/xadmin.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/jqPaginator.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/xadmin.js"></script>

</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="#">用户列表</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input type="text" id="inputUserAccount" name="inputUserAccount" placeholder="请输入账号" autocomplete="off" class="layui-input">
            <button class="layui-btn" type="button" onclick="queryUsrByUserAccount()"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>

    <xblock>
        <button class="layui-btn" onclick="x_admin_show('添加信息','./user-add.jsp',500,450)"><i class="layui-icon"></i>添加
        </button>
        <span class="x-right" style="line-height:40px" >共有数据：<span id="total_data"></span>条</span>
    </xblock>
    <table class="layui-table">
        <thead>
			<tr>
				<th>序号</th>
				<th>账号</th>
				<th>密码</th>
				<th>姓名</th>
                <th>爱好</th>
                <th>电话</th>
                <th>权限</th>
                <th>操作</th>
			</tr>
        </thead>
        <tbody id="tab"></tbody>
		<tr id="paging">
            <td colspan="8" align="center">
                <ul class="pagination" id="pagination1"></ul>
            </td>
        </tr>
    </table>


</div>
<script>
    //总页数，总条数，当前页
    var totalPages=0;
    var totalCounts=0;
    var currentPage=0;
    $(document).ready(function () {
        //第一次访问初始化页面
        showPage(-1);
        $("#pagination1").jqPaginator({
            //赋值
            totalPages:totalPages,
            totalCounts:totalCounts,
            currentPage:currentPage,
            first:"<li class='first'><a href='javascript:void(0);'>首页</a></li>",
            prev:"<li class='prev'><a href='javascript:void(0);'>上一页</a></li>",
            next:"<li class='next'><a href='javascript:void(0);'>下一页</a></li>",
            last:"<li class='last'><a href='javascript:void(0);'>末页</a></li>",
            page:"<li class='page'><a href='javascript:void(0);'>{{page}}</a></li>",
            onPageChange:function (num) {
                showPage(num);
            }
        })
    })

    //显示所有用户
    function showPage(n) {
        $.ajax({
            url:"<%=basePath%>user/queryAllUser",
            dataType:"json",
            type:"post",
            async:false,
            data:{"pageNum":n,"pageSize":5},
            success:function (data) {
                if(n===-1){
                    totalPages=data.pages;
                    totalCounts=data.total;
                    currentPage=data.pageNum;
                }
                //定义一个空字符串，用于数据拼接
                var str="";
                var list=data.list;
                if(list.length>0){
                    for (var i = 0; i <list.length; i++) {
                        str+="<tr>"+
                                "<td>"+((data.pageNum-1)*5+i+1)+"</td>"+
                                "<td hidden>"+list[i].id+"</td>"+
                                "<td>"+list[i].userAccount+"</td>"+
                                "<td>"+list[i].userPassword+"</td>"+
                                "<td>"+list[i].userName+"</td>"+
                                "<td>"+list[i].userHobby+"</td>"+
                                "<td>"+list[i].userPhone+"</td>"+
                                "<td>"+list[i].userRole+"</td>"+
                                // "<td>"+list[i].userState+"</td>"+
                            "<td class='td-manage'><button type='button' onclick='openUpdate(this)'><i class='layui-icon'>&#xe642;</button>" +
                            '<button type="button" onclick="del(' +"'"+ list[i].userAccount+"'" + ')"><i class="layui-icon">&#xe640;</i></button></td>' +
                            "</tr>";
                    }
                    $("#total_data").html(data.total);//显示数据总个数
                    $("#tab").html(str);
                }else{
                    $("#total_data").html(0);//数据总数显示
                    $("#tab").html("<tr><td colspan='8' align='center'>你查询的数据不存在,请添加数据</td></tr>");
                    $("#paging").hide();//没有数据时隐藏按钮
                }
            },
            error:function () {
                alert("服务器错误");
            }
        })
    }

    //模糊查询用户列表
    function queryUsrByUserAccount() {
        var userAccount=$("#inputUserAccount").val();
        if(userAccount==null||userAccount==""){
            alert("请输入查询内容");
            return;
        }
        //第一次访问初始化页面
        showUser(-1,userAccount);
        $("#pagination1").jqPaginator({
            //赋值
            totalPages:totalPages,
            totalCounts:totalCounts,
            currentPage:currentPage,
            first:"<li class='first'><a href='javascript:void(0);'>首页</a></li>",
            prev:"<li class='prev'><a href='javascript:void(0);'>上一页</a></li>",
            next:"<li class='next'><a href='javascript:void(0);'>下一页</a></li>",
            last:"<li class='last'><a href='javascript:void(0);'>末页</a></li>",
            page:"<li class='page'><a href='javascript:void(0);'>{{page}}</a></li>",
            onPageChange:function (num) {
                showUser(num,userAccount);
            }
        })
    }
    function showUser(n,userAccount) {
        $.ajax({
            url:"<%=basePath%>user/queryUserByAccount",
            dataType:"json",
            type:"post",
            async:false,
            data:{"pageNum":n,"pageSize":5,"userAccount":userAccount},
            success:function (data) {
                if(n===-1){
                    totalPages=data.pages;
                    totalCounts=data.total;
                    currentPage=data.pageNum;
                }
                //定义一个空字符串，用于数据拼接
                var str="";
                var list=data.list;
                if(list.length>0){
                    $("#paging").show();
                    for (var i = 0; i <list.length; i++) {
                        str+="<tr>"+
                            "<td>"+(i+1)+"</td>"+
                            "<td hidden>"+list[i].id+"</td>"+
                            "<td>"+list[i].userAccount+"</td>"+
                            "<td>"+list[i].userPassword+"</td>"+
                            "<td>"+list[i].userName+"</td>"+
                            "<td>"+list[i].userHobby+"</td>"+
                            "<td>"+list[i].userPhone+"</td>"+
                            "<td>"+list[i].userRole+"</td>"+
                            // "<td>"+list[i].userState+"</td>"+
                            "<td class='td-manage'><button type='button' onclick='openUpdate(this)'><i class='layui-icon'>&#xe642;</button>" +
                            '<button type="button" onclick="del(' +"'"+ list[i].userAccount+"'" + ')"><i class="layui-icon">&#xe640;</i></button></td>' +
                            "</tr>";
                    }

                    $("#total_data").html(data.total);//显示数据总个数
                    $("#tab").html(str);
                }else{
                    totalPages=1;
                    totalCounts=1;
                    currentPage=1;
                    $("#total_data").html(0);//数据总数显示
                    $("#tab").html("<tr><td colspan='8' align='center'>你查询的数据不存在,请添加数据</td></tr>");
                    $("#paging").hide();//没有数据时隐藏按钮
                }
            },
            error:function () {
                alert("服务器错误");
            }
        })
    }

    //根据账号删除用户
    function del(userAccount) {
        if(confirm("你确定删除？？？")){
            $.ajax({
                url:"<%=basePath%>user/delUserByUserAccount",
                dataType:"json",
                data:{"userAccount":userAccount},
                type:"post",
                success:function (data) {
                    if(data==="success"){
                        alert("删除成功");
                        window.location.reload();
                    }else
                        alert("删除失败");
                },error:function () {
                    alert("服务处错误");
                }
            })
        }
    }

    //修改用户
    function openUpdate(obj) {
        //获取数据
        var userAccount = $(obj).parent().parent().find('td').eq(2).text();
        var userPassword = $(obj).parent().parent().find('td').eq(3).text();
        var userName = $(obj).parent().parent().find('td').eq(4).text();
        var userHobby = $(obj).parent().parent().find('td').eq(5).text();
        var userPhone = $(obj).parent().parent().find('td').eq(6).text();
        //把数据存入localStorage
        localStorage.setItem("userAccount",userAccount);
        localStorage.setItem("userName",userName);
        localStorage.setItem("userPassword",userPassword);
        localStorage.setItem("userPhone",userPhone);
        localStorage.setItem("userHobby",userHobby);
        //打开修改页面
        x_admin_show('修改用户','./user-edit.jsp',500,500);
    }
</script>
</body>
</html>